import React, { useState, useMemo, useCallback } from 'react'
import API from '../api/login'
import { Form, Input, Button, Toast, Checkbox } from 'antd-mobile'
import { ILogin } from '../../interface'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { SET_USER } from '../../store/actionType'
import './login.scss'
import { LeftOutline } from 'antd-mobile-icons'
import ReactDOM, { unstable_batchedUpdates } from "react-dom";

export default function Login() {
    const initUserForm = { username: '', password: '' }
    const [userForm, setUserForm] = useState<any>(initUserForm)
    const [title, setTitle] = useState<string>('账号密码登录')
    const [isRegister, setIsRegister] = useState<boolean>(false)
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const isTitle = useMemo(() => { return title == '账号密码登录' }, [title])

    const [timer, setTimer] = useState(60)
    const [changeCheck, setChangeCheck] = useState(false)
    const onFinish = async (values: ILogin) => {

        if (!isRegister) {
            if (title == '账号密码登录') {
                if (changeCheck) {
                    let res = await API['login'](values)
                    console.log(res.data.data, '登录')
                    if (res.data.code == 200) {
                        dispatch({ type: SET_USER, payload: res.data.data })
                        setTimeout(() => {
                            Toast.show({
                                content: '登陆成功',
                                position: 'top'
                            })
                            navigate('/')
                        }, 1500)
                    } else {
                        Toast.show({
                            content: isTitle ? '账号或密码错误' : '手机号格式错误',
                            position: 'top'
                        })
                    }
                } else {
                    Toast.show({
                        content: '请勾选用户和隐私协议',
                        position: 'top'
                    })
                }
            } else {
                if (changeCheck) {
                    let res = await API['register'](values)
                    console.log(res.data.data, '登录/注册')
                    if (res.data.code == 200) {
                        dispatch({ type: SET_USER, payload: res.data.data })
                        setTimeout(() => {
                            Toast.show({
                                content: '注册成功',
                                position: 'top'
                            })
                            navigate('/')
                        }, 1500)
                    } else {
                        Toast.show({
                            content: isTitle ? '账号或密码错误' : '手机号格式错误',
                            position: 'top'
                        })
                    }
                } else {
                    setIsRegister(true)
                    Toast.show({
                        content: '请勾选用户和隐私协议',
                        position: 'top'
                    })
                }
            }
        }
    }
    const changeInput = (changedValues: any) => {
        // console.log(changedValues,'99999999999')
        setUserForm(changedValues)
    }
    const changeIsRegister = () => {
        if (userForm.username == '') {
            setIsRegister(false)
            Toast.show({
                content: '请输入手机号',
                position: 'top'
            })
        } else {
            console.log(userForm, '下一步')
            setIsRegister(!isRegister)
        }
    }
    const nextButton = () => {
        setTitle("验证码登录")
        setUserForm(initUserForm)
        setIsRegister(false)
        setInterval(() => {
            ReactDOM.unstable_batchedUpdates(() => {
                setTimer((c) => c - 1);
            })
        }, 1000)
    }
    const checkbox = (val: boolean) => {
        console.log(val)
        setChangeCheck(val)
    }
    return (
        <div>
            <div className='back'>
                <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
                {title}
            </div>
            <div className='banxin'>
                <Form layout='horizontal' mode='card' initialValues={userForm} onValuesChange={changeInput}
                    onFinish={onFinish} footer={isTitle ? <Button block type='submit' color='primary' size="large" >登录</Button> : <Button block type='submit' color='primary' size="large" onClick={changeIsRegister}>{isRegister ? '注册/登录' : '下一步'}</Button>
                    }>
                    <Form.Item name='username' trigger={'onChange'} rules={[{ required: true, message: isTitle ? '账号不能为空' : '手机号不能为空' }]}>
                        <Input placeholder={isTitle ? '请输入账号' : '请输入手机号'} />
                    </Form.Item>
                    {
                        isTitle && <Form.Item name='password' rules={[{ required: true, message: '密码不能为空' }]}>
                            <Input type='password' placeholder='请输入密码' />
                        </Form.Item>
                    }
                    {
                        isRegister && <Form.Item name='password'>
                            <Input placeholder='请输入短信验证码' /><span>{timer}s</span>
                        </Form.Item>
                    }
                </Form>
                <div className='register'>
                    {
                        isTitle ? <Button onClick={nextButton} block type='submit' color='primary' size="large" >
                            验证码登录
                        </Button> : <Button onClick={() => (setTitle("账号密码登录"), setUserForm(initUserForm), setIsRegister(false))} block type='submit' color='primary' size="large" >
                            账号密码登录
                        </Button>
                    }
                </div>
            </div>
            <div className='foot'>
                <Checkbox onChange={checkbox}></Checkbox>
                <span>注册登录即表示您已阅读并同意《用户协议》、《隐私政策》</span>
            </div>
        </div>
    )
}
